<style src="@/css/components/button.css"></style>
<style>
    .dept-main{background: #fff;padding: 30px 24px 200px;}
    .main-title{
        width:100%;
        height:40px;
        background:rgba(229,247,255,1);
        border-radius:4px;
        border:1px solid rgba(142,212,255,1);
        font-size:14px;
        color:rgba(102,106,128,1);
        margin-bottom:20px;

        display: flex;
        box-sizing: border-box;
        align-items: center;
    }

    .main-title img {
        width:14px;
        height: 14px;
        margin:0 6px 0 10px;
    }

    .main-title span{color: #bbb;font-size: 14px;}
    .tree-box{
        height:480px;
        border: 1px solid #eee;
        width: 49%;
        /* margin-right: 3%; */
        float: left;
    }
    .tree-head{
        height:36px;
        background: #fcfdff;
        padding: 10px 20px;
        display: flex;
        align-items:center;
        border-bottom:1px solid rgba(225,231,235,1);
        display:flex;
        justify-content:space-between;
        border-radius:2px 2px 0px 0px;
    }

    .tree-head a{
        font-size:14px;
        color:rgba(89,121,248,1);
    }

    .tree-body{height: 420px;overflow-y: auto;padding: 30px 20px;      box-sizing: border-box;}
    .tree-foot{height: 40px;padding: 10px 20px;}
    .form-box{
        height: 480px;
        border:1px solid #eee;
        width: 49%;
        float: right;
    }

    .form-box-head{
        height:36px;
        background: #fcfdff;
        text-align: center;
        line-height:36px;
        font-size: 16px;
        color:rgba(0,0,0,1);
        display: flex;
        justify-content:space-between;
        padding: 10px 20px;
        border-bottom:1px solid rgba(225,231,235,1);
    }


    .form-box-head a {
        font-size:14px;
        color:rgba(89,121,248,1);
        margin-left:20px;
    }

    .dept-form-box{padding: 50px 40px 0 30px;}

    .m-inner .el-tree-node__content {
        height: 32px;
        line-height: 32px;
    }

    .dept-form-box .el-input{width: 100%;}
    .dept-form-box .el-select{width: 100%;}
    .add-save-btn{width: 140px;}

    .el-input.is-disabled + .el-form-item__error{
        display: none;
    }
</style>
<template>
    <section>
        <div class="dept-main">
            <div class="main-title"><img data-v-d8050750="" src="http://jhsy-img.caizhu.com/FgEYebYNYNIIDbE1wB1J5Hwp6cH3" alt="">类型设置上限为两级</div>
            <div class="clearfix">
                <div class="tree-box">
                    <div class="tree-head ">
                        <span>类型设置</span>
                        <a href="javascript:;" @click="addDepartment" class="btn" v-show =" form.ParentID == 0">添加类型</a>
                    </div>
                    <div class="tree-body">
                        <el-tree
                                :props="propsName"
                                :data="departmentList"
                                node-key="ResTypeID"
                                highlight-current
                                ref="tree"
                                :filter-node-method="filterNode"
                                @node-click="getnode"
                                :default-checked-keys="[ ResTypeID ]"
                                default-expand-all="true">
                        </el-tree>
                    </div>
                </div>
                <div class="form-box">
                    <div class="form-box-head">
                        <span>类型详情</span>
                        <div>
                            <a href="javascript:;" @click="editInfo" :disabled="topDepartmentID==departmentID" class="btn" v-if=" !!curData && !editFlag && form.ResTypeID != 0">修改</a>
                            <a href="javascript:;" @click="deleteState = true " :disabled="topDepartmentID==departmentID" class="btn" v-if="!!curData && !editFlag && form.ResTypeID != 0">删除</a>
                        </div>

                    </div>
                    <div class="dept-form-box">
                        <el-form  :model="form"  ref="form" label-width="130px">
                            <el-form-item label="上级类型">
                                <span v-show="!editFlag">{{form.ParentName}}</span>
                                <span v-show=" form.ParentID == 0 && form.ResTypeID != 0">全部类型</span>
                                <el-select v-show="!!editFlag && form.ParentID != 0" v-model="form.ParentID"  placeholder="请选择上级类型">
                                    <el-option
                                            v-for="item in departmentList[0].child"
                                            :key="item.ResTypeID"
                                            :label="item.ResTypeName"
                                            :value="item.ResTypeID">
                                    </el-option>
                                </el-select>
                                <!-- <el-input v-show="topDepartmentID==departmentID&&!addFlag" class="input" v-model="form.ParentName" placeholder="请输入上级部门" disabled></el-input> -->
                            </el-form-item>

                            <el-form-item label="名称" prop="ResTypeName"  :rules="[{ required: true, message: '请选择类型', trigger: 'blur' }]">
                                <span v-show="!editFlag">{{form.ResTypeName}}</span>
                                <el-input class="input" v-model="form.ResTypeName" maxlength="10" placeholder="请输入部门名称" :disabled="!editFlag" v-show="!!editFlag" v-if="form.ParentID == 0 "></el-input>
                                <el-input class="input" v-model="form.ResTypeName" maxlength="20" placeholder="请输入部门名称" :disabled="!editFlag" v-show="!!editFlag" v-else></el-input>
                            </el-form-item>

                            <el-form-item label="">
                                <div class="clearfix mt20" v-show="editFlag">
                                    <el-button type="primary" class="add-save-btn" @click="saveAddJunior">保存</el-button>
                                    <!-- <el-button v-show="addFlag" @click="saveAddJunior(1)">保存并继续添加</el-button> -->
                                </div>
                            </el-form-item>


                        </el-form>
                    </div>
                </div>
            </div>
        </div>

        <!-- 弹窗区 -->
        <el-dialog
            title="提示"
            :visible.sync="deleteState"
            class="new-dialog"
            width="480px"
            :before-close="handleClose">
            <div class="cont">删除类型，将该类型资源移动到未分类</div>
            <span slot="footer" class="dialog-footer">
                <el-button type="text no-border" @click="deleteState = false">取消</el-button>
                <el-button type="primary"  class="add" @click="delResType">确 定</el-button>
            </span>
        </el-dialog>

    </section>
</template>

<script>

import qs from 'qs'

export default{
    data: function(){
        return {
            deleteState:false,
            propsName: {
                label: 'ResTypeName',
                children: 'child'
            },

            departmentList:[
                {
                    ParentID:"0",
                    ResTypeID:"0",
                    ResTypeName:"全部类型",
                    child:[]
                }
            ],
            departmentSelectList:[],
            employeeSelectList:[],
            form:{},
            departmentID:'',
            ResTypeID:0,
            topDepartmentID:'',
            topLevel:'',
            editFlag:false,
            addFlag:false,
            curData:false,
            path: [
                {
                    'name':'设置',
                    'path':'/organization/dept-list'
                },
                {
                    'name':'类型设置'
                }
            ]

        }
    },
//    mixins: [mixinMethods],
    methods: {
        getnode(data,node,vueComponent){
            this.curData = true
            this.editFlag = false;
            this.addFlag = false;
            this.ResTypeID = data.ResTypeID;

            if( data.ResTypeID == 0) {
                this.form = {
                    ParentID:"0",
                    ResTypeID:"0",
                    ResTypeName:"全部类型"
                }

                return false;
            }

            this.getDepartmentInfo();
        },

        // 删除指定分类
        delResType() {
            axios.post('/com/res-cates/delResType', qs.stringify({
                ResTypeID:this.ResTypeID
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.typeTree()
                    this.deleteState = false
                    this.$message.success('删除成功')
                }else {
                    this.$message.error(d.msg)
                }
            })
        },

        editInfo(){
            this.editFlag = true;
        },

        saveAddJunior(goon){
            if( this.form.ResTypeName == '' ) {
                this.$message.error('请输入名称')
                return false;
            }

            if(this.addFlag){
                axios.post('/com/res-cates/addResType', qs.stringify({
                    ParentID:this.form.ResTypeID,
                    ResTypeName:this.form.ResTypeName
                })).then( (res) => {
                    var d = res.data;
                    if(d.flag == 1){
                        this.typeTree();
                        this.$message.success('添加成功');

                        if(goon == 1){
                            this.form.DepartmentName = '';
                            this.form.DepartmentDesc = '';
                            this.form.HeaderEmployeeID = '';
                        }else {
                            this.addFlag = false;
                            this.editFlag = false;
                        }
                    }else {
                        this.$message.error(d.msg)
                    }
                });
            }else {
                axios.post('/com/res-cates/editResType', qs.stringify({
                    ParentID:this.form.ParentID,
                    ResTypeName:this.form.ResTypeName,
                    ResTypeID:this.ResTypeID,
                })).then( (res) => {
                    var d = res.data;
                    if(d.flag == 1){
                        this.typeTree()
                        this.editFlag = false
                        this.$message.success('保存成功')
                    }else {
                        this.$message.error(d.msg)
                    }
                });
            }

        },

        // 获取类型详情
        getDepartmentInfo(){
            axios.post('/com/res-cates/currentResTypeTree', qs.stringify({
                resTypeID:this.ResTypeID
            })).then( (res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.form = d.data
                }else {
                    this.$message.error(d.msg)
                }
            });
        },
        //类型树
        typeTree(firstFlag){
            axios.post('/com/res-cates/comResTypeTree', qs.stringify({
            })).then( (res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.departmentList[0].child = d.data
                    this.form = {
                        ParentID:"0",
                        ResTypeID:"0",
                        ResTypeName:"全部类型"
                    }

                }else {
                    this.$message.error(d.msg)
                }
            });
        },

        // 添加类型树
        addDepartment(){
            this.curData = false
            this.addFlag = true;
            this.editFlag = true;

             this.form.ResTypeName = '';
             this.form.ParentID = this.form.ResTypeID
        }
    },
    mounted: function(){
        this.typeTree()
        this.$store.commit('setPath', this.path)

    }
}


</script>
